<template>
	<scroll-view :scroll-into-view="topItem" scroll-with-animation scroll-y="true" class="scroll-cont" @scroll="handleScroll">
		<view>
			<view id="top"></view>
			<nav-custom></nav-custom>
			<swiper class="banner" :indicator-dots="true" indicator-active-color="#ffe32a" :autoplay="true">
				<swiper-item v-for="(item,index) in banner" :key="item.objectId" @click="handleBanner(item.link)">
					<view class="swiper-item">
						<image :src="item.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<home-title title="本季推荐" enTitle="Seasonal Recommend" enTit="Seasonal"></home-title>
			<scroll-view scroll-x="true" >
				<view class="scroll-inner">
					<image src="http://lc-UOGxPwQC.cn-n1.lcfile.com/4Ep0JO4qJcjiVuNjCX91YCXOOLTyaUNL/recommend1.jpg" mode="heightFix"></image>
					<image src="http://lc-UOGxPwQC.cn-n1.lcfile.com/qcUoJ9TVvtlr2eHquDWsnYG7MtofAlLy/recommend2.jpg" mode="heightFix"></image>
					<image src="http://lc-UOGxPwQC.cn-n1.lcfile.com/siucMO9w7k8zvmowscAMLej3toPsOmme/recommend3.jpg" mode="heightFix"></image>
				</view>
			</scroll-view>
			<home-title title="法式经典" enTitle="French Classics" enTit="French"></home-title>
			<image src="http://lc-UOGxPwQC.cn-n1.lcfile.com/vJp8pjIMlzXpqLbj7cEAHFD81jrmx5Mp/french.jpg" mode="" class="classify"></image>
			<view class="flex flex-wrap padding-sm justify-between">
				<!-- <good-item v-for="(item,index) in banner" gdata="{{item}}"></good-item> -->
			</view>
			<view class="back-top" v-if="isShow" @click="handleBackTop">
				<text class="icon-tubiao_fanhuidingbu iconfont"></text>
			</view>
		</view>
		<tab-custom></tab-custom>
	</scroll-view>
</template>

<script>
	// import { $http, $get, $post } from '../../utils/request.js'
	export default {
		data() {
			return {
				isShow: false,
				// 返回顶部的标记点
				topItem: '',
				banner: []
			}
		},
		methods: {
			handleScroll(e) {
				let { scrollTop } = e.detail
				this.isShow = scrollTop > 500 ? true : false
			},
			handleBackTop() {
				this.topItem = 'top'
				setTimeout(() => {
					this.topItem = ''
				},2000)
			},
			handleBanner(link) {
				uni.navigateTo({
					url:`banner-ad?link=${link}`
				})
			}
		},
		onLoad() {
			this.$get('/1.1/classes/banner').then(res => {
				// console.log(res);
				this.banner = res.results
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style lang="scss">
page {
	padding-bottom: 60upx;
}
.banner {
	height: 1000upx;
	swiper-item {
		height: 1000upx;
	}
	images {
		width: 100%;
		height: 1000upx;
	}
}
.scroll-inner {
	white-space: nowrap;
	image {
		height: 290upx;
	}
}
.classify {
	height: 380upx;
	width: 100%;
}
.back-top {
	height: 100upx;
	width: 100upx;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 30upx 4upx rgba(0,0,0,0.4);
	position: fixed;
	bottom: 40upx;
	right: 20upx;
	text-align: center;
	line-height: 100upx;
}
.scroll-cont {
	height: 100vh;
}
</style>
